<template>
    <div>
        <div class="text"><span style="float: left;margin-left:10px;color: black;font-size: 16px" @click="goindex">返回</span><span>发表帖子</span></div>
        <van-cell is-link @click="showPopup" >{{publishedV}}</van-cell>
        <van-popup v-model="show" closeable
                   close-icon="close" position="bottom" :style="{ height: '30%' }">
            <van-picker
                    title="标题"
                    :columns="columns"
                    @change="onChange"
            />
        </van-popup>
        <input class="publishIn" type="text" placeholder="请输入标题" v-model="text1">
        <textarea style="width: 90%;margin: 0px 10px; border-color: black" name="" id="" cols="30" rows="10" placeholder="请输入文本" v-model="text2"></textarea>
        <van-uploader style="margin: 10px 10px" v-model="fileList" multiple max-count="1" :after-read="afterRead" />
        <br>
        <van-button style="width: 80%;margin-left: 10%" plain type="primary" @click="refer" >提交</van-button>
    </div>
</template>

<script>
    import {Dialog, Toast} from 'vant';
    import {specialList,publishedS,pictureL} from "../api/api";
    export default {
        name: "Published",
        data() {
            return {
                publishUrl:'',
                text1:'',
                text2:'',
                fileList: [],
                show: false,
                publishmsg:[],
                columns: [],
                publishedV:'二手',
                publishedV2:1
            };
        },
        methods: {
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                console.log(file);
                pictureL(file.file).then(res=>{
                    // console.log(res)
                    // console.log(res.url)
                    this.publishUrl = res.data.url
                })
            },
            refer(){
                const referToast = Toast.loading({
                    duration:0,
                    message: '提交中...',
                    forbidClick: true,
                    loadingType: 'spinner',

                });
                publishedS( this.publishedV2,this.text1,this.text2,this.publishUrl).then(res=>{
                    console.log(res)
                    console.log(this.fileList)
                    if (res.data.code ==0){
                        Dialog.alert({
                            message: res.data.msg,
                            theme: 'round-button',
                        }).then(() => {
                        });
                        referToast.clear()
                        this.$router.push('/index')
                    }else {
                        referToast.clear()
                        Dialog.alert({
                            message: res.data.msg,
                            theme: 'round-button',
                        }).then(() => {
                        });
                    }
                })
            },
            onChange(picker, value, index) {
                this.publishedV = value
                this.publishedV2 = index+1
                console.log(this.publishedV2)
                Toast(`${value}`);
            },
            showPopup() {
                this.show = true;
            },
            goindex(){
                this.$router.push('/index')
            }
        },
        created() {
            // Mylogin().then(res=>{
            //     console.log(res)
            // })
            specialList().then(res=>{
                // console.log(res)
                for(var i =0; i<res.data.rows.length; i++){
                    // console.log(res.data.rows[i].name)
                    this.columns.push(res.data.rows[i].name)
                }
            })
        }
    }
</script>

<style scoped>
    .text {
        margin-top: 10px;
        font-size: 20px;
        text-align: center;
        color: transparent;
        background-image: -webkit-gradient(linear,left top,right top,color-stop(0,skyblue),color-stop(1,hotpink));
        -webkit-background-clip: text;
    }
    .publishIn {
        height: 34px;
        width: 90%;
        border-radius: 2%;
        margin: 10px 10px;
    }
</style>